<template>
  <div>
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <div class="course-list">
      <div class="item" v-for="item in userList" :key="item.user_id">
        <div class="content">
          <edu-avatar :size="44" :src="item.avatar_url" @click="goUser(item.user_id)"></edu-avatar>
          <div class="name" @click="goUser(item.user_id)">{{ item.nick_name }}</div>
        </div>
        <div class="earnings">{{ `贡献收益：${item.sum}` }}</div>
      </div>
    </div>
    <EduNoData v-if="$util.isEmpty(userList)"></EduNoData>
    <EduPagination @handleCurrentChange="handleCurrentChange"></EduPagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
import EduNoData from '@/components/EduNoData'
export default {
  components: {
    MyTabs,
    EduPagination,
    EduNoData
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/finance/my_income',
          title: '推广收入'
        },
        {
          path: '/my/finance/my_course',
          title: '推广课程'
        },
        {
          path: '/my/finance/my_user',
          title: '推广用户'
        }
      ],
      userList: [],
      routePath: this.$route.path
    }
  },
  created() {
    this.getUserData()
  },
  methods: {
    getUserData() {
      this.$api.getUserIncomeUser(
        {
          page: this.$store.getters['paginate/page'],
          count: 16
        },
        res => {
          this.userList = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 16,
            total: res.data.flow.total
          })
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getUserData()
    },
    handleNext(id) {
      this.$router.push({ path: '/course/' + id })
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.course-list {
  .item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .content {
      display: flex;
      align-items: center;
    }
    .name {
      margin-left: 20px;
      font-size: 14px;
      font-weight: 500;
      color: $text-color-import;
      @include ellipsis();
      cursor: pointer;
    }
    .earnings {
      font-size: 14px;
      font-weight: 500;
      color: $text-color-error;
    }
  }
}
</style>
